<template>
  <div class="container">
    <Header @success="onSuccess" />
    <Content ref="contentRef" :originJson="originJson" :newJson="newJson" />
  </div>
</template>

<script setup lang="ts">
import Header from "./components/Header.vue";
import Content from "./components/Content.vue";
import { IJsonDataContext } from "@/types/question";
import piniaStore from "@/store";
import { onMounted, ref } from "vue";

const originJson = ref<IJsonDataContext[]>([]);
const newJson = ref<IJsonDataContext[]>([]);

const contentRef = ref();
const onSuccess = (value: {
  originJson: IJsonDataContext[];
  newJson: IJsonDataContext[];
}) => {
  originJson.value = value.originJson;
  newJson.value = value.newJson;
  contentRef.value.setCurrentContextId(originJson.value[0].context_id);
};

onMounted(() => {
  piniaStore.questionStore.getDbData();
});
</script>

<style scoped lang="scss">
// .container {
//   display: flex;
//   flex-direction: column;
// }
</style>
